* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}

/*去掉列表前面的小点*/
li {
    list-style: none;
}

/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;
    /*ie6*/
    vertical-align: middle;
}

/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}

/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

h4 {
    font-weight: 400;
}

body {
    /* cover图片会铺满整个盒子（图片会等比例缩放）  连写方式*/
    background: url(/images/bg.jpg) no-repeat 0 0 / cover;
    /* 单独写方式 */
    /* background-size: cover; */
    /* 在其容器内尽可能大地缩放图像，而不裁剪或拉伸图像。如果容器大于图像 说人话就是图片会完全显示出来 但会导致平铺 所以记得添加不no-repeat */
    /* background-size:contain; */
}

/* 小于1024 大于1920时不再进行缩放 */
@media screen and (max-width:1024px) {
    html {
        font-size: 42.66px !important;
    }
}

@media screen and (min-width:1920px) {
    html {
        font-size: 80px !important;
    }
}

.viewport {
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    /* 因为是背景图片 有了内容后是会盖住背景图片的头部所以需要挤压一下显示出背景头部  这部分就需要适配所以需要转换为rem*/
    padding: 1.1rem .25rem 0;
    background: url(/images/logo.png) no-repeat 0 0 / contain;
    /* 780px 是因为可能分辨率最小为1024px 1024搭配780比较合理 */
    min-height: 780px;
}


.viewport .column {
    flex: 3;
    /* background-color: pink; */
}

.viewport .column:nth-child(2) {
    flex: 4;
}

/* 公共面板样式 */
.panel {
    position: relative;
    /* 这个15px 其实是为了盒子内容服务的可以当做一个padding来用  背景色改为透明的比较严谨 万一边框图片因为什么原因没有及时加载出来不会因此露底*/
    border: 15px solid transparent;
    /* 1.边框宽度就是边框图片宽度(所以不用在单独指定边框图片宽度border-image-width ) 其宽度要对应切割后的边框图片像素大小 说白了就是边框图片装在边框里面  */
    border-width: .6375rem .475rem .25rem 1.65rem;
    /*2. border-image-source 给元素添加边框图片地址 */
    border-image-source: url(/images/border.png);
    /*3. border-image-slice  切割后的边框图片四个边的像素大小 因为本身语法就跟单位所以不需要转换rem了 */
    border-image-slice: 51 38 20 132;
    /* 4.因为1的原因 所以不需要在单独指定border-image-width 边框图片宽度了 */
    margin-bottom: 0.25rem;
}

.inner {
    /*内容会贴在边框底侧显示 因为边框图片比较宽 会导致内容在盒子内部过低 所以采取把内容在装到子盒子里添加绝对定位 用负值偏移拉伸至完全压住父盒子 拉伸的像素取决于四个边框多出的像素 */
    /* 反正这是一种策略 当内容被挤压可以利用定位负值拉伸到合适位置 */
    position: absolute;
    top: -0.6375rem;
    left: -1.65rem;
    right: -0.475rem;
    bottom: -0.25rem;
  
    padding: 0.3rem 0.45rem;
}
.panel h3 {
    font-size: .25rem;
    color: #fff;
    font-weight: 400;
}
.overview {
    height: 1.375rem;
}

.overview ul {
    /* 使用弹性盒 里面的子元素就会排成一行 */
    display: flex;
    /* 让子元素平均分配空间 */
    justify-content: space-between;
}

.overview ul li h4 {
    font-size: 0.35rem;
    color: #fff;
    margin: 0 0 .1rem .06rem;

}

.overview ul li span {
    font-size: .2rem;
    color: #4c9bfd;
}


/* 监控区域模块制作  */
.monitor {
    height: 6rem;
}

.monitor .inner {
    padding: 0.3rem 0;
    display: flex;
    flex-direction: column;
}

.monitor .tabs {
    padding: 0 0.45rem;
    margin-bottom: 0.225rem;
    display: flex;
}

.monitor .tabs a {
    color: #1950c4;
    font-size: 0.225rem;
    padding: 0 0.3375rem;
}

.monitor .tabs a:first-child {
    padding-left: 0;
    border-right: 0.025rem solid #00f2f1;
}

.monitor .tabs a.active {
    color: #fff;
}

.monitor .content {
    flex: 1;
    position: relative;
    display: none;
}

.monitor .head {
    display: flex;
    justify-content: space-between;
    line-height: 1.05;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.15rem 0.45rem;
    color: #68d8fe;
    font-size: 0.175rem;
}

.monitor .marquee-view {
    position: absolute;
    top: 0.5rem;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}

.monitor .row {
    display: flex;
    justify-content: space-between;
    line-height: 1.05;
    font-size: 0.15rem;
    color: #61a8ff;
    padding: 0.15rem 0.45rem;
}

.monitor .row .icon-dot {
    position: absolute;
    left: 0.2rem;
    opacity: 0;
}

.monitor .row:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #68d8fe;
}

.monitor .row:hover .icon-dot {
    opacity: 1;
}

.monitor .col:first-child {
    width: 1rem;
}

.monitor .col:nth-child(2) {
    width: 2.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.monitor .col:nth-child(3) {
    width: 1rem;
}

/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
      animation: move 15s linear infinite;
}
@keyframes move {
    0% {}

    100% {
        transform: translateY(-50%);
    }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
    /* animaation-paly-state:paused 暂停动画 */
    animation-play-state: paused;
}

/* 点位分布统计模块制作 */
.point {
    height: 4.25rem;
  }
  .point .chart {
    display: flex;
    margin-top: 0.3rem;
    justify-content: space-between;
  }
  .point .pie {
    width: 3.9rem;
    height: 3rem;
    margin-left: -0.125rem;
  }
  .point .data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2.1rem;
    padding: 0.45rem 0.375rem;
    box-sizing: border-box;
    background-image: url(../images/rect.png);
    background-size: cover;
  }
  .point h4 {
    margin-bottom: 0.15rem;
    font-size: 0.35rem;
    color: #fff;
  }
  .point span {
    display: block;
    color: #4c9bfd;
    font-size: 0.2rem;
  }